
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-cloud-upload"></i>
                    <div class="name">云上传</div>
                    <div class="fontclass">.icon-cloud-upload</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cloud-download"></i>
                    <div class="name">云下载</div>
                    <div class="fontclass">.icon-cloud-download</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zoom-out"></i>
                    <div class="name">缩小</div>
                    <div class="fontclass">.icon-zoom-out</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-list"></i>
                    <div class="name">列表</div>
                    <div class="fontclass">.icon-list</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tag"></i>
                    <div class="name">标签</div>
                    <div class="fontclass">.icon-tag</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dot"></i>
                    <div class="name">点</div>
                    <div class="fontclass">.icon-dot</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tags"></i>
                    <div class="name">标签</div>
                    <div class="fontclass">.icon-tags</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paper"></i>
                    <div class="name">报表新闻</div>
                    <div class="fontclass">.icon-paper</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user"></i>
                    <div class="name">user</div>
                    <div class="fontclass">.icon-user</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-undo"></i>
                    <div class="name">undo</div>
                    <div class="fontclass">.icon-undo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-relation"></i>
                    <div class="name">分析</div>
                    <div class="fontclass">.icon-relation</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zoom"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-zoom</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tag-v2"></i>
                    <div class="name">标签</div>
                    <div class="fontclass">.icon-tag-v2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-glass"></i>
                    <div class="name">glass</div>
                    <div class="fontclass">.icon-glass</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-redo"></i>
                    <div class="name">redo2</div>
                    <div class="fontclass">.icon-redo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-power"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-power</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-plane"></i>
                    <div class="name">航空运输</div>
                    <div class="fontclass">.icon-plane</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-video"></i>
                    <div class="name">云视频</div>
                    <div class="fontclass">.icon-video</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sign-in"></i>
                    <div class="name">登录</div>
                    <div class="fontclass">.icon-sign-in</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lock"></i>
                    <div class="name">锁定</div>
                    <div class="fontclass">.icon-lock</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-reset"></i>
                    <div class="name">重置</div>
                    <div class="fontclass">.icon-reset</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tool"></i>
                    <div class="name">工具</div>
                    <div class="fontclass">.icon-tool</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-train"></i>
                    <div class="name">火车</div>
                    <div class="fontclass">.icon-train</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paper-list"></i>
                    <div class="name">订单列表</div>
                    <div class="fontclass">.icon-paper-list</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-police"></i>
                    <div class="name">警察</div>
                    <div class="fontclass">.icon-police</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-share"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-share</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mid"></i>
                    <div class="name">最小化</div>
                    <div class="fontclass">.icon-mid</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bookmark-off"></i>
                    <div class="name">书签</div>
                    <div class="fontclass">.icon-bookmark-off</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-link"></i>
                    <div class="name">链接</div>
                    <div class="fontclass">.icon-link</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-back-circle"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-back-circle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cloud"></i>
                    <div class="name">云智能</div>
                    <div class="fontclass">.icon-cloud</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fold"></i>
                    <div class="name">菜单</div>
                    <div class="fontclass">.icon-fold</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-edit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cycle"></i>
                    <div class="name">循环</div>
                    <div class="fontclass">.icon-cycle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-home</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-apply"></i>
                    <div class="name">应用</div>
                    <div class="fontclass">.icon-apply</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bookmark-on"></i>
                    <div class="name">标签</div>
                    <div class="fontclass">.icon-bookmark-on</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zoom-in"></i>
                    <div class="name">44放大</div>
                    <div class="fontclass">.icon-zoom-in</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tv"></i>
                    <div class="name">tv</div>
                    <div class="fontclass">.icon-tv</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cuff"></i>
                    <div class="name">手铐</div>
                    <div class="fontclass">.icon-cuff</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-service"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-service</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-phone"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-phone</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bell"></i>
                    <div class="name">通知</div>
                    <div class="fontclass">.icon-bell</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-branch"></i>
                    <div class="name">分支</div>
                    <div class="fontclass">.icon-branch</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-remove"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-remove</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-umbrella"></i>
                    <div class="name">雨伞</div>
                    <div class="fontclass">.icon-umbrella</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-case"></i>
                    <div class="name">档案</div>
                    <div class="fontclass">.icon-case</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-component"></i>
                    <div class="name">30-复制组件</div>
                    <div class="fontclass">.icon-component</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mobile"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.icon-mobile</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-trophy"></i>
                    <div class="name">奖杯</div>
                    <div class="fontclass">.icon-trophy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-task"></i>
                    <div class="name">任务</div>
                    <div class="fontclass">.icon-task</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-track"></i>
                    <div class="name">轨迹</div>
                    <div class="fontclass">.icon-track</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-target"></i>
                    <div class="name">目标1</div>
                    <div class="fontclass">.icon-target</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pc"></i>
                    <div class="name">工作台</div>
                    <div class="fontclass">.icon-pc</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-attach"></i>
                    <div class="name">附件</div>
                    <div class="fontclass">.icon-attach</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tower"></i>
                    <div class="name">基站</div>
                    <div class="fontclass">.icon-tower</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-collapsed"></i>
                    <div class="name">折叠</div>
                    <div class="fontclass">.icon-collapsed</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-log"></i>
                    <div class="name">日志</div>
                    <div class="fontclass">.icon-log</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-role"></i>
                    <div class="name">050301角色设置</div>
                    <div class="fontclass">.icon-role</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-upload"></i>
                    <div class="name">上传</div>
                    <div class="fontclass">.icon-upload</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hotel"></i>
                    <div class="name">酒店</div>
                    <div class="fontclass">.icon-hotel</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-car"></i>
                    <div class="name">车辆</div>
                    <div class="fontclass">.icon-car</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit2"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-edit2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shield"></i>
                    <div class="name">检测</div>
                    <div class="fontclass">.icon-shield</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-close"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-close</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-date"></i>
                    <div class="name">日期</div>
                    <div class="fontclass">.icon-date</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dict"></i>
                    <div class="name">字典</div>
                    <div class="fontclass">.icon-dict</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-unlock"></i>
                    <div class="name">解锁</div>
                    <div class="fontclass">.icon-unlock</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-search"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-search</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-group-fill"></i>
                    <div class="name">群组</div>
                    <div class="fontclass">.icon-group-fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-stop"></i>
                    <div class="name">停用</div>
                    <div class="fontclass">.icon-stop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-play"></i>
                    <div class="name">启用</div>
                    <div class="fontclass">.icon-play</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-copy"></i>
                    <div class="name">复制</div>
                    <div class="fontclass">.icon-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-save"></i>
                    <div class="name">保存</div>
                    <div class="fontclass">.icon-save</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-download"></i>
                    <div class="name">下载</div>
                    <div class="fontclass">.icon-download</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-detail"></i>
                    <div class="name">查看详情</div>
                    <div class="fontclass">.icon-detail</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-export"></i>
                    <div class="name">导出</div>
                    <div class="fontclass">.icon-export</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-switch"></i>
                    <div class="name">切换</div>
                    <div class="fontclass">.icon-switch</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bar"></i>
                    <div class="name">柱形图</div>
                    <div class="fontclass">.icon-bar</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-location"></i>
                    <div class="name">地点</div>
                    <div class="fontclass">.icon-location</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-line"></i>
                    <div class="name">折线图</div>
                    <div class="fontclass">.icon-line</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-camera"></i>
                    <div class="name">相机</div>
                    <div class="fontclass">.icon-camera</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-org"></i>
                    <div class="name">组织管理</div>
                    <div class="fontclass">.icon-org</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-group"></i>
                    <div class="name">多人</div>
                    <div class="fontclass">.icon-group</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-key"></i>
                    <div class="name">钥匙</div>
                    <div class="fontclass">.icon-key</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-filter"></i>
                    <div class="name">筛选</div>
                    <div class="fontclass">.icon-filter</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-password"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-password</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-full"></i>
                    <div class="name">最大化</div>
                    <div class="fontclass">.icon-full</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-folder"></i>
                    <div class="name">文件</div>
                    <div class="fontclass">.icon-folder</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mini"></i>
                    <div class="name">最小化</div>
                    <div class="fontclass">.icon-mini</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-memo"></i>
                    <div class="name">订单</div>
                    <div class="fontclass">.icon-memo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wait"></i>
                    <div class="name">等待1</div>
                    <div class="fontclass">.icon-wait</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-star-half"></i>
                    <div class="name">favorite</div>
                    <div class="fontclass">.icon-star-half</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-music"></i>
                    <div class="name">music-player(1)</div>
                    <div class="fontclass">.icon-music</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-share-v2"></i>
                    <div class="name">share-symbol</div>
                    <div class="fontclass">.icon-share-v2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-star-off"></i>
                    <div class="name">star(1)</div>
                    <div class="fontclass">.icon-star-off</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-star-on"></i>
                    <div class="name">star</div>
                    <div class="fontclass">.icon-star-on</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bad-on"></i>
                    <div class="name">bad2</div>
                    <div class="fontclass">.icon-bad-on</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-beaker"></i>
                    <div class="name">beaker</div>
                    <div class="fontclass">.icon-beaker</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-adjust"></i>
                    <div class="name">Adjust</div>
                    <div class="fontclass">.icon-adjust</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-anchor"></i>
                    <div class="name">anchor</div>
                    <div class="fontclass">.icon-anchor</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-book"></i>
                    <div class="name">books</div>
                    <div class="fontclass">.icon-book</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bad-off"></i>
                    <div class="name">bad</div>
                    <div class="fontclass">.icon-bad-off</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-brief"></i>
                    <div class="name">briefcase</div>
                    <div class="fontclass">.icon-brief</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-certificate"></i>
                    <div class="name">certificate</div>
                    <div class="fontclass">.icon-certificate</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-drop"></i>
                    <div class="name">Drops</div>
                    <div class="fontclass">.icon-drop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-editor"></i>
                    <div class="name">editor</div>
                    <div class="fontclass">.icon-editor</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-external-v2"></i>
                    <div class="name">External links</div>
                    <div class="fontclass">.icon-external-v2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-filter-v2"></i>
                    <div class="name">filter</div>
                    <div class="fontclass">.icon-filter-v2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-exit"></i>
                    <div class="name">exit</div>
                    <div class="fontclass">.icon-exit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gift"></i>
                    <div class="name">gift</div>
                    <div class="fontclass">.icon-gift</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-earth"></i>
                    <div class="name">earth</div>
                    <div class="fontclass">.icon-earth</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-good-on"></i>
                    <div class="name">good2</div>
                    <div class="fontclass">.icon-good-on</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gear"></i>
                    <div class="name">gear</div>
                    <div class="fontclass">.icon-gear</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-good-off"></i>
                    <div class="name">Good、</div>
                    <div class="fontclass">.icon-good-off</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hammer"></i>
                    <div class="name">hammer</div>
                    <div class="fontclass">.icon-hammer</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-horn"></i>
                    <div class="name">horn</div>
                    <div class="fontclass">.icon-horn</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hard-disk"></i>
                    <div class="name">hard disk</div>
                    <div class="fontclass">.icon-hard-disk</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lightning"></i>
                    <div class="name">lightning</div>
                    <div class="fontclass">.icon-lightning</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-light-bulb"></i>
                    <div class="name">light bulb</div>
                    <div class="fontclass">.icon-light-bulb</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-movie"></i>
                    <div class="name">movie</div>
                    <div class="fontclass">.icon-movie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paper-plane-on"></i>
                    <div class="name">Paper airplane (2)</div>
                    <div class="fontclass">.icon-paper-plane-on</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-magicwand"></i>
                    <div class="name">magic wand</div>
                    <div class="fontclass">.icon-magicwand</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paper-plane-off"></i>
                    <div class="name">Paper airplane</div>
                    <div class="fontclass">.icon-paper-plane-off</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sort-down"></i>
                    <div class="name">sorting</div>
                    <div class="fontclass">.icon-sort-down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pencil"></i>
                    <div class="name">pencil</div>
                    <div class="fontclass">.icon-pencil</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-signal"></i>
                    <div class="name">rss</div>
                    <div class="fontclass">.icon-signal</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sort-up"></i>
                    <div class="name">sorting2</div>
                    <div class="fontclass">.icon-sort-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-print"></i>
                    <div class="name">print</div>
                    <div class="fontclass">.icon-print</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sort"></i>
                    <div class="name">sorting3</div>
                    <div class="fontclass">.icon-sort</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gantt"></i>
                    <div class="name">task</div>
                    <div class="fontclass">.icon-gantt</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-truck"></i>
                    <div class="name">truck</div>
                    <div class="fontclass">.icon-truck</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wrench"></i>
                    <div class="name">wrench</div>
                    <div class="fontclass">.icon-wrench</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fork"></i>
                    <div class="name">106843</div>
                    <div class="fontclass">.icon-fork</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cut"></i>
                    <div class="name">cut</div>
                    <div class="fontclass">.icon-cut</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-coffee"></i>
                    <div class="name">coffee</div>
                    <div class="fontclass">.icon-coffee</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-compass"></i>
                    <div class="name">Compass</div>
                    <div class="fontclass">.icon-compass</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-desktop"></i>
                    <div class="name">desktop</div>
                    <div class="fontclass">.icon-desktop</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-building"></i>
                    <div class="name">build</div>
                    <div class="fontclass">.icon-building</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-direction"></i>
                    <div class="name">direction</div>
                    <div class="fontclass">.icon-direction</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-external"></i>
                    <div class="name">external</div>
                    <div class="fontclass">.icon-external</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-down"></i>
                    <div class="name">down</div>
                    <div class="fontclass">.icon-down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-notebook"></i>
                    <div class="name">Notebook</div>
                    <div class="fontclass">.icon-notebook</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-up"></i>
                    <div class="name">Rise</div>
                    <div class="fontclass">.icon-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shield-v2"></i>
                    <div class="name">shield</div>
                    <div class="fontclass">.icon-shield-v2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-keyboard"></i>
                    <div class="name">keyboard</div>
                    <div class="fontclass">.icon-keyboard</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rss-v2"></i>
                    <div class="name">rss</div>
                    <div class="fontclass">.icon-rss-v2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sad"></i>
                    <div class="name">sad</div>
                    <div class="fontclass">.icon-sad</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bag"></i>
                    <div class="name">suitcase</div>
                    <div class="fontclass">.icon-bag</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-smile"></i>
                    <div class="name">Smile</div>
                    <div class="fontclass">.icon-smile</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ticket"></i>
                    <div class="name">ticket</div>
                    <div class="fontclass">.icon-ticket</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-marker"></i>
                    <div class="name">target</div>
                    <div class="fontclass">.icon-marker</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
